<script setup lang="ts">
import { Close } from "@element-plus/icons-vue"
import { ref, watch } from "vue"
import { useTypePopver } from "./useTypePopver"

const { hide, updateText, handleClickItem, visible, isFocused, input, listData, getSelectName, deleteItem } = useTypePopver()
const inputRef = ref()
function focusInput() {
  nextTick(() => {
    inputRef.value?.focus()
    isFocused.value = true
  })
}
const emits = defineEmits(["update"])

const handleUpdateText = () => {
  updateText()
  emits("update")
}

const handleDeleteItem = ()=>{
  deleteItem()
  emits("update")
}

watch(visible, (val) => {
  if (val) {
    focusInput()
  } else {
    isFocused.value = false
  }
})
</script>

<template>
  <div class="type-popper" v-show="visible">
    <div class="controls">
      <div class="headerWrapper">
        <p class="title">
          属性配置
        </p>
        <div class="action">
          <el-icon>
            <Close @click="hide" />
          </el-icon>
        </div>
      </div>
      <div class="bottomWrapper">
        <el-input

          ref="inputRef" v-model="input" placeholder="请输入属性名称"
        />
        <div class="actions">
          <el-button type="primary" size="small" @click="handleUpdateText">
            确定
          </el-button>
          <el-button type="danger" size="small" @click="handleDeleteItem">
            删除
          </el-button>
        </div>
      </div>
    </div>
    <div class="optionsContainer">
      <div class="options">
        <ol>
          <li
            @click="handleClickItem(item)"
            :class="{ selected: getSelectName(item.name) }" v-for="(item, index) in listData" :key="item.color"
          >
            <div class="shortcut">
              {{ index + 1 }}
            </div>
            <div class="label">
              {{ item.name }}
            </div>
            <div class="color" :style="{ backgroundColor: item.color }" />
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.type-popper {
  cursor: default;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  color: #333;
  left: 10px;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  top: 10px;
  transition: opacity 0.15s ease;
  width: 250px;
  z-index: 100 !important;
  .headerWrapper {
    --tw-text-opacity: 1;
    align-items: center;
    background-color: #6d28d9;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
    display: flex;
    flex-direction: row;
    height: 36px;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    width: 100%;
    .title {
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1.25rem;
    }
    .action {
      flex-direction: row;
      font-size: 0.875rem;
      gap: 0.5rem;
      line-height: 1.25rem;
      cursor: pointer;
      position: relative;
      top: 3px;
    }
  }

  .bottomWrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  .optionsContainer {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
    border-top-width: 1px;
    max-height: 273px;
    overflow: auto;
    .options {
      padding-top: 8px;
      text-align: left;
      ol {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          align-items: center;
          cursor: pointer;
          display: flex;
          padding-bottom: 0.125rem;
          padding-top: 0.125rem;
          transition: background-color 0.15s;
          &:hover {
            --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            background-color: #f5f3ff;
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          }
          &.selected {
            background-color: #6706ce;
            color: #fff;
          }
          .shortcut {
            border: 1px solid #aaa;
            background-color: #fff;
            border-radius: 3px;
            color: #333;
            font-size: 9px;
            margin: 4px 8px 4px 9px;
            min-width: 20px;
            text-align: center;
            line-height: 18px;
            padding: 0 1px;
          }
          .label {
            flex: 1;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .color {
            border: 1px solid #fff;
            border-radius: 20px;
            height: 10px;
            margin: 0 10px;
            width: 10px;
          }
        }
      }
    }
  }
}
</style>
